JAVASCRIPT版贪吃蛇头走位V1可手动设置障碍

最新推荐文章于 2024-01-29 18:06:11 发布
最新推荐文章于 2024-01-29 18:06:11 发布
阅读量226 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： 贪吃蛇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freshet/article/details/105863062
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

var a = new Array();
N=3;
curI=0;
curJ=0;
boomIJ=0;
var curTd;
    function init() {
        
        for(var i=0;i<N;i++){
            a[i] = new Array();
            for(var j=0;j<N;j++){
                a[i][j] = 0;
            }
        }
        
        var num = Math.floor(Math.random() * 9) + 1;
        var idNum = "td" + num;
        curTd=document.getElementById(idNum);
        
        curTd.style.background = "green";
        curI=parseInt((num-1)/N);
        curJ=parseInt((num-1)%N);
        
        //alert(curI+" "+curJ);
    }
    
    function check(td){
        //boomIJ=parseInt(td.parentElement.rowIndex)*N+parseInt(td.cellIndex));
        i=parseInt(td.parentElement.rowIndex);
        j=parseInt(td.cellIndex);
        boomIJ=i*N+j;
        td.style.background = "red";
        //alert(boomIJ);
    }
    

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

        
        
        //alert(e.keyCode);
        if (e && e.keyCode == 38 ) {
            if(curI-1>=0){
                curTd.style.background = "";
                var idNum=(curI-1)*N+curJ+1;
                curI=curI-1;
                curTd=document.getElementById(("td"+idNum));
                curTd.style.background = "green";
                
                //alert(curI+" "+curJ+" "+boomIJ)
                if(curI*N+curJ == boomIJ){
                    alert("game over!");
                    return;
                }
            }
            //alert('38=上键');
            
            
        }

        if ( e.keyCode == 39) {
            //alert('39=右键');
            if(curJ+1<N){
                curTd.style.background = "";
                curJ=curJ+1;
                var idNum=curI*N+curJ+1;
                
                curTd=document.getElementById(("td"+idNum));
                curTd.style.background = "green";
                
                //alert(curI+" "+curJ+" "+boomIJ)
                if(curI*N+curJ == boomIJ){
                    alert("game over!");
                    return;
                }
            }
            
            
        }

        if ( e.keyCode == 37) {
            //alert('37=左键');
            if(curJ-1>=0){
                curTd.style.background = "";
                curJ=curJ-1;
                var idNum=curI*N+curJ+1;
                curTd=document.getElementById(("td"+idNum));
                curTd.style.background = "green";
                //alert(curI+" "+curJ+" "+boomIJ)
                if(curI*N+curJ == boomIJ){
                    alert("game over!");
                    return;
                }
            }
        }

        if (e && e.keyCode == 40 ) {
            //alert('40=下键');
            if(curI+1<N){
                curTd.style.background = "";
                curI=curI+1;
                var idNum=curI*N+curJ+1;                
                curTd=document.getElementById(("td"+idNum));
                curTd.style.background = "green";
                //alert(curI+" "+curJ+" "+boomIJ)
                if(curI*N+curJ == boomIJ){
                    alert("game over!");
                    return;
                }
            }
            
            
        }
        
        
    }

    window.onload = init;
</script>
</head>
<body οnkeydοwn="turn(event)">

    <table style="width: 50%; height: 300px;" border="1">
        <tr>
            <td id="td1" οnclick="check(this)" οnkeydοwn="turn(event)">1</td>
            <td id="td2" οnclick="check(this)" οnkeydοwn="turn(event)">2</td>
            <td id="td3" οnclick="check(this)" οnkeydοwn="turn(event)">3</td>
        </tr>
        <tr>
            <td id="td4" οnclick="check(this)" οnkeydοwn="turn(event)">4</td>
            <td id="td5" οnclick="check(this)" οnkeydοwn="turn(event)">5</td>
            <td id="td6" οnclick="check(this)" οnkeydοwn="turn(event)">6</td>
        </tr>
        <tr>
            <td id="td7" οnclick="check(this)" οnkeydοwn="turn(event)">7</td>
            <td id="td8" οnclick="check(this)" οnkeydοwn="turn(event)">8</td>
            <td id="td9" οnclick="check(this)" οnkeydοwn="turn(event)">9</td>

        </tr>
    </table>
</body>
</html>

FRESHET
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【华为OD机试真题 JavaScript】贪吃的猴子|解题思路、代码解析
yegu001的博客
01-08 1392
一只贪吃的猴子，来到一个果园，发现许多串香蕉排成一行，每串香蕉上有若干根香蕉。猴子获取香蕉，每次都只能从行的开头或者末尾获取，并且只能获取N次，求猴子最多能获取多少根香蕉。第一次获取香蕉，无论是从行的开头或者末尾获取，得到的香蕉根数目为1。但是，从行末尾获取能获取到最优的策略，后面可以直接得到香蕉根数目6和3。第一次获取香蕉为行的开头，第二次获取为行的末尾，因此最终根数为4+3 = 7。否则，遍历i从0到k+1，分别计算分割情况下的和，并更新最大值max。第三行输入为N，表示获取的次数。
281.【华为OD机试】贪吃的猴子（滑动窗口和动态规划—Java&Python&C++&JS实现）
最新发布
一键难忘的博客
02-25 4345
【华为OD机试】贪吃的猴子（滑动窗口和动态规划—Java&Python&C++&JS实现） 一只贪吃的猴子，来到一个果园，发现许多串香蕉排成一行，每串香蕉上有若干根香蕉。每串香蕉的根数由数组numbers给出。猴子获取香蕉，每次都只能从行的开头或者末尾获取，并且只能获取N次，求猴子最多能获取多少根香蕉。 输入描述： 第一行为数组numbers的长度 第二行为数组numbers的值每个数字通过空格分开 第三行输入为N，表示获取的次数
java实现有障碍物的贪吃蛇游戏
10-07
利用Java实现的贪吃蛇游戏设计，包含关卡、速度、分数等信息，有障碍物；符合贪吃蛇游戏的所有设计理念，贪吃蛇吃到食物，身体会自增等等。
贪吃蛇c语言 游戏中会出现障碍物,贪吃蛇C语言游戏代码.doc
weixin_32173041的博客
05-22 1213
贪吃蛇C语言游戏代码//////////////////////////////////////////////开始编写游戏需要的类////////////////////////////////////////////#include //EasyX_2011惊蛰版(绘图库)#include #include #include #define UP1#define DOWN2#define L...
贪吃蛇游戏开发_增加障碍物石头
09-01
java贪吃蛇游戏编程代码---增加障碍物石头，包括代码、视频，很详细！！
HTML贪吃蛇怎么判断碰到蛇身,从网上看到的不到20行的js代码实现贪吃蛇代码可否仔细的解释一下？...
weixin_39538962的博客
07-01 204
格式化一下代码就看懂了:首先HTML部分:然后游戏部分:var sn = [42, 41], // 存放贪食蛇的坐标, 第一个是头, 最后一个是尾, 初始的蛇长度是2, 坐标[2, 2], [1, 2]dz = 43, // 食物的坐标, 初始[3, 2]fx = 1, // 蛇前进的方向n, // 蛇头位置ctx = document.getElementById("can").getConte...
Js 贪吃蛇
忘川
08-22 290
<!DOCTYPE html> <html> <head> <title>贪吃蛇</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .backDiv { text-align: center; ...
贪吃蛇头文件
12-15
简单的贪吃蛇C语言头文件，想自己做出贪吃蛇？不妨参考一下头文件，可能会给你不一样的提示哦
华为OD机试D卷C卷 - 贪吃的猴子（C++ Java JavaScript Python C语言）
算法大师！
12-21 2839
只贪吃的猴子，来到一个果园，发现许多串香蕉排成一行，每串香蕉上有若干根香蕉。每串香蕉的根数由数组numbers给出。
flappyDragon:飞翔的贪吃龙
05-31
《飞翔的贪吃龙：JavaScript实现的趣味游戏》 在当今的互联网世界中，JavaScript作为最流行的编程语言之一，不仅广泛应用于网页开发，还在游戏制作领域大放异彩。"flappyDragon"就是一个以JavaScript为基础，创造出...
c语言实战之贪吃蛇
热门推荐
2302_79539362的博客
01-29 1万+
c语言实战之贪吃蛇
【C/C++实战项目】贪吃蛇游戏
phoenixFlyzzz的博客
03-15 6364
C语言代码实现贪吃蛇游戏设计、游戏机制、游戏界面、文件读写、自定义设置
Swing贪吃蛇游戏(二)：增加随机产生障碍物功能
u010633678的专栏
07-26 2367
在上一篇博文中，介绍了Swing贪吃蛇游戏基本功能的实现： Swing贪吃蛇游戏(一)：基本功能实现 >>>> [url]http://mouselearnjava.iteye.com/blog/1913290[/url] 本文在原有基本功能上增加随机产生障碍物的功能，增加些游戏的难度 :) 随机产生障碍物的功能可以有多种实现，我们可以将分数的改变作为产生随机数的条件，比如...
java贪吃蛇（障碍物*咬尾巴）
neverlesspray的博客
07-31 2882
ArrayList的各种方法addAll(),add(),remove(),clear()，与数组的区别 退出：System.exit(0); JPanel的paintComponent(Graphics g)方法，有GUI系统调用，或者调用JPanel.repaint()重绘 KeyListener监听按键事件，非数字去方向键为VK_DOWN..数字区方向键为VK_PK_... Timer tim
python制作贪吃蛇游戏_python实现贪吃蛇游戏源码
weixin_39849942的博客
11-23 159
本文实例为大家分享了python实现贪吃蛇的具体代码，供大家参考，具体内容如下import pygameimport sysimport randomSCREEN_X=600SCREEN_Y=600class Snake(object):def __init__(self):self.direction=pygame.K_RIGHTself.body = []for i in range(5):s...
c语言贪吃蛇怎么设置障碍物,c语言怎么自定义信号，贪吃蛇想关
weixin_35779001的博客
05-24 622
该楼层疑似违规已被系统折叠隐藏此楼查看此楼#include #include #include #include #include using namespace std;#defineA_MOVE_LEFT SIGRTMIN+1#define D_MOVE_RIGHTSIGRTMIN+2#define W_MOVE_ARROWSIGRTMIN+3#define S_MOVE_BACKSIGRT...
Html实现贪吃蛇
qq_44023710的博客
01-26 2034
HTML实现贪吃蛇 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Snake</title> </head> <body style="text-align:center;margin:100px;background-color:#aaaaaa"
HTML实现贪吃蛇
Jaybo
04-14 8430
<!doctype html><html><head></head><body> <div id="box" style="width:256px;font:25px/25px 宋体;background:#000;color:#9f9;"></div><script> var arr=[15]; var next=10;//最好判断一下arr[1]!=arr[0]+x document.onkey
贪吃虫javascript代码
06-07
好的，以下是一个简单的贪吃虫的 JavaScript 代码示例，供您参考： ```html <!DOCTYPE html> <html> <head> <title>贪吃虫游戏</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 初始化贪吃虫和食物位置 var snake = [{x: 10, y: 10}]; var food = {x: Math.floor(Math.random() * 40) * 10, y: Math.floor(Math.random() * 40) * 10}; // 监听键盘事件，控制贪吃虫移动方向 document.addEventListener("keydown", function(event) { if (event.keyCode === 37) { snake.direction = "left"; } else if (event.keyCode === 38) { snake.direction = "up"; } else if (event.keyCode === 39) { snake.direction = "right"; } else if (event.keyCode === 40) { snake.direction = "down"; } }); // 更新贪吃虫位置 function update() { var head = {x: snake[0].x, y: snake[0].y}; if (snake.direction === "left") { head.x -= 10; } else if (snake.direction === "up") { head.y -= 10; } else if (snake.direction === "right") { head.x += 10; } else if (snake.direction === "down") { head.y += 10; } snake.unshift(head); if (snake[0].x === food.x && snake[0].y === food.y) { food = {x: Math.floor(Math.random() * 40) * 10, y: Math.floor(Math.random() * 40) * 10}; } else { snake.pop(); } } // 渲染游戏画面 function render() { ctx.clearRect(0, 0, 400, 400); ctx.fillStyle = "#f00"; ctx.fillRect(food.x, food.y, 10, 10); ctx.fillStyle = "#000"; snake.forEach(function(segment) { ctx.fillRect(segment.x, segment.y, 10, 10); }); } // 游戏循环 function gameLoop() { update(); render(); setTimeout(gameLoop, 100); } gameLoop(); </script> </body> </html> ``` 该代码创建了一个画布（canvas），并在其中绘制了一个贪吃虫和一些食物。玩家可以使用方向键控制贪吃虫的移动方向。贪吃虫会自动向前移动，并在吃到食物时变长。游戏循环使用 setTimeout() 函数来定时更新和渲染游戏画面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值