js小游戏

var maps = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];

var role = [3, 4];

function up(action){

  if(action == 1) role[1]--;
  if(action == 2) role[0]--;
  if(action == 3) role[1]++;
  if(action == 4) role[0]++;

  var tmp = ‘‘;
  console.clear();

for(var i = 0; i < maps.length; i++){

  tmp = ‘‘;
  for(var j = 0; j < maps[i].length; j++){

    if(role[0] == i && role[1] == j){

      tmp += ‘* ‘;

    }else {

      tmp += maps[i][j] + ‘ ‘;     

    }

  }
  console.log(tmp);

}

}

document.onkeydown=function(event){
  var e = event || window.event || arguments.callee.caller.arguments[0];

  if(e && e.keyCode==37){ // 左
    up(1);
  }
  if(e && e.keyCode==38){ // 上
    up(2);
  }
  if(e && e.keyCode==39){ // 右
    up(3);
  }
  if(e && e.keyCode==40){ // 下
    up(4);
  }

}; 

原文地址:https://www.cnblogs.com/jh1994/p/9248163.html

时间: 2024-10-27 00:24:12

js小游戏的相关文章

js小游戏——看你能坚持多久

点击另存用到的图片. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" > <head

一个js小游戏----总结

花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用webGl之类的,单纯的逻辑+对DOM的操作,算是一次试手吧,之所以没有继续去完善,是因为想要整合一下,各个模块要更清晰,大体的设计是按MVC来的,但是对控制器那一块还不满意,设计过程中比较得意的是碰撞检测吧,因为我用了一个数组来维护怪物的生灭,怪物产生则数组push,怪物消失则用splice来从数组中删

js小游戏:五子棋

使用纯js的小游戏,五子棋 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>五子棋</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 canvas{ 12 margin:10px; 13 border

JS小游戏----猜拳小游戏

这周学习了JS 的基础数据 函数 和 对象 每一个都是很多的属性和方法 下面是对象做的Xmind 有很多方法 创建对象的方法 遍历对象 添加删除对象中的属性 访问对象的方法 点 中括号 访问法 猜拳游戏 实际原理其实很简单  规则大家全世界都通用 所以 这个游戏 短短几行 switch就可以 把简易的原理实现出来 但是要做的 像一个小游戏一样 能应对各种情况 和 前进 和 后退的操作 加了一些switch 语句 让分支语句更多  是考虑到的情况更加全面  然后用 函数包装 功能模块 列如 判断模

JS小游戏-蓝色拼图

初见 我是在这里看到这个游戏的 × 请看这里 http://www.webhek.com/misc/inverter. 看到这个小游戏就觉得挺有意思的,于是想要去自己实现它. 开始 下面的是这个小游戏,大家玩玩看 ×Close Oh!蓝色拼图 当前级别: 重置本局 重置级别 玩法说明 以下是代码 写完后自己看着都觉得恶心...很想把它放到一个对象里面,但是太懒了,能用就行(つд⊂) .gamebox { background-color: #4D4D4D; border-radius: 4px;

原生js打飞机小游戏

最近为了巩固一下原生的知识,然后拿了一个js小游戏来入手.主要也是为了学习和练手. js代码如下: 1 window.onload = function(){ 2 var oBtn = document.getElementById('gameBtn'); 3 oBtn.onclick = function(){ 4 this.style.display = 'none'; 5 Game.init('div1');//把父级传进去 6 }; 7 }; 8 //创建Game单体 9 10 var

js消除小游戏(极简版)`

js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div"></div> </div>     (2)简单的基础样式 * { margin: 0; padding: 0; } div.box { width: 1000px; height: 700px; border: 1px solid #008B8B; box-sizing:

js选择颜色小游戏(随机生成不含重复数字的数组,通过数组中的数控制定义好的数组)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js网页版小游戏</title> <style media="screen"> .wrap { width: 577px; outline: 1px solid hotpink; margin: 100px auto; box-shadow: 0 0 5px; } .

js实现2048小游戏

这是学完javascript基础,编写的入门级web小游戏 游戏规则:在玩法规则也非常的简单,一开始方格内会出现2或者4等这两个小数字,玩家只需要上下左右其中一个方向来移动出现的数字,所有的数字就会想滑动的方向靠拢,而滑出的空白方块就会随机出现一个数字,相同的数字相撞时会叠加靠拢,然后一直这样,不断的叠加最终拼凑出2048这个数字就算成功.但是我们的程序没有终点. 一.HTML部分 1 <body> 2 <!-- 分数行 --> 3 <p id="scorePane