jsスネークゲームの実装アイデアとソースコード_javascriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jsスネークゲームの実装アイデアとソースコード_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:05 PM

jsゲーム蛇

この記事の例では、参考のために js Snake ゲームの関連コードを共有します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>贪吃蛇小游戏</title>
  <style>
*{margin:0; padding:0;}
header {
  display: block;
  margin: 0 auto;
  width: 500px;
  text-align: center;
}
header h1 {
  font-family: Arial;
  font-weight: bold;
}
header #newGameButton {
  display: block;
  margin: 20px auto;
  width: 100px;
  padding: 10px 10px;
  background-color: #8f7a66;
  font-family: Arial;
  color: white;
  border-radius: 10px;
  text-decoration: none;
}
header #newGameButton:hover {
  background-color: #9f8b77;
}
header p {
  font-family: Arial;
  font-size: 25px;
  margin: 20px auto;
}
canvas{
  display:block; 
  border:medium double black;
  margin:4px auto;
}
  </style>
</head>
<body>
  <header>
    <h1 id="贪吃蛇小游戏">贪吃蛇小游戏</h1>
    <a href="javascript:newgame();" id="newGameButton">New Game</a>
    <p>score:<span id="score">0</span></p>
  </header>
  <canvas id="canvas">
    Your browser doesn't support the <code>canvas</code> element.
  </canvas>
  <script>
  var CANVAS = document.getElementById("canvas");
var CTX = CANVAS.getContext("2d");
var SNAKE = new Array();  //用队列模拟蛇身
var DIR = "right";        //用来控制蛇头的方向
var SIZE = 20;        //蛇身的宽度
var FOODX = 0;      //食物的x坐标
var FOODY = 0;      //食物的y坐标
var HEADX = 0;    //蛇头的x坐标
var HEADY = 0;    //蛇头的y坐标
var MAXWIDTH = 200;    //画布的高度
var MAXHEIGHT = 200;  //画布的宽度
var TIME = 400;      //蛇的速度
var SCORE = 0;      //计算玩家分数
var interval = null;

CANVAS.width = MAXWIDTH;
CANVAS.height = MAXHEIGHT;

window.onload = function(){
  newgame();
};
document.getElementById("newGameButton").click(function(){
  newgame();
});
function newgame(){
  SNAKE = [];    //用队列模拟蛇身
  DIR = "right";  //用来控制蛇头的方向
  HEADX = 0;    //蛇头的x坐标
  HEADY = 0;    //蛇头的y坐标
  SCORE = 0;
  window.clearInterval(interval);
  interval = null;
  //初始化画布
  CTX.clearRect(0, 0, MAXWIDTH, MAXHEIGHT);
  //画一条蛇
  drawSnake();
  //放置食物
  setFood();
  //移动蛇
  interval = window.setInterval(move, TIME);

}
function move(){
  switch(DIR){
    case "up":HEADY = HEADY-SIZE;break;
    case "right":HEADX = HEADX+SIZE;break;
    case "down":HEADY = HEADY+SIZE;break;
    case "left":HEADX = HEADX-SIZE;break;
  }
  if(HEADX>MAXWIDTH-SIZE || HEADY>MAXHEIGHT-SIZE || HEADX<0 || HEADY<0){
    alert("你的分数为："+SCORE+"分，继续努力吧!失败原因：碰壁了.....");
    window.location.reload();
  }
  for(var i=1;i<SNAKE.length;i++){
    if(SNAKE[i][0] == SNAKE[0][0] && SNAKE[i][1] == SNAKE[0][1]){
      alert("你的分数为："+SCORE+"分，继续努力吧！失败原因：撞到自己了.....");
      window.location.reload();
    }
  }
  if(SNAKE.length == MAXWIDTH *MAXHEIGHT){
    alert("好厉害!么么哒~");
    window.location.reload();
  }
  moveIn(HEADX, HEADY);//移动一格
}
document.onkeydown = function(e) { //改变蛇方向
  var code = e.keyCode - 37;
  switch(code){
    case 1 : DIR = "up";break;//上
    case 2 : DIR = "right";break;//右
    case 3 : DIR = "down";break;//下
    case 0 : DIR = "left";break;//左
  }
}
//=============================画一条蛇=======================================================
function drawSnake(){
  CTX.fillStyle = "black";
  //画蛇头
  CTX.fillRect (HEADX, HEADY, SIZE, SIZE);
  SNAKE.push([HEADX, HEADY]);
  
  //画蛇身
  switch(DIR){
    case "up": 
      drawBody(HEADX, HEADY + SIZE, HEADX, HEADY + 2 * SIZE);
      break;
    case "right": 
      drawBody(HEADX - SIZE, HEADY, HEADX - 2 * SIZE, HEADY);
      break;
    case "down": 
      drawBody(HEADX, HEADY - SIZE, HEADX, HEADY - 2 * SIZE);
      break;
    case "left": 
      drawBody(HEADX + SIZE, HEADY, HEADX + 2 * SIZE, HEADY);
      break;
  }
}
function drawBody(x1, y1, x2, y2){
  CTX.fillRect (x1, y1, SIZE, SIZE); 
  CTX.fillRect (x2, y2, SIZE, SIZE); 
  SNAKE.push([x1, y1]);
  SNAKE.push([x2, y2]);
}
//===========================放置食物==============================
function setFood(){
  do{
    FOODX = SIZE * Math.floor(Math.random() * MAXWIDTH / SIZE);
    FOODY = SIZE * Math.floor(Math.random() * MAXHEIGHT / SIZE);
  }while(foodInSnake());
  CTX.fillStyle = "red";
  CTX.fillRect (FOODX, FOODY, SIZE, SIZE);
}
function foodInSnake(){
  for (var i = 0; i < SNAKE.length; i++) {
    if(FOODX == SNAKE[i][0] && FOODY == SNAKE[i][1]){
      return true;
    }
  }
  return false;
}
//========================================移动一格===========================
function moveIn(x, y){
  CTX.fillStyle = "black";
  CTX.fillRect(x, y, SIZE, SIZE);//重画蛇头  
  //把新蛇头添加到 SNAKE 数组
  var newSnake = [[x, y]];
  SNAKE = newSnake.concat(SNAKE);

  if(false == eatFood()){//如果没吃到食物，减少一格蛇尾  
    var snakeTail = SNAKE.pop();//获得蛇尾位置
    CTX.clearRect(snakeTail[0], snakeTail[1], SIZE, SIZE);//去掉蛇尾  
  }
}
function eatFood(){
  if(HEADX == FOODX && HEADY == FOODY){
    CTX.fillStyle = "block";
    CTX.fillRect (FOODX, FOODY, SIZE, SIZE);

    setFood();
    SCORE++;
    //$("#score").text(SCORE);
    document.getElementById("score").innerHTML = SCORE;
    return true;
  }
  return false;
}

  </script>
</html>

レンダリング:

もの:

function newgame(){
  重置蛇和分数的数据；
  清除interval；
  初始化画布；
  画一条蛇；
  放置食物；
  使用定时器（setInterval）使蛇移动（move函数）；
}
function move(){
  根据方向改变蛇头下一格将要到达的位置；
  判断游戏是否结束，以及显示结束的原因（包含输赢）；
  蛇移动一格（moveIn函数）；
}
对键盘的方向键作监控，当改变方向时，修改全局变量DIR的值（用于存储方向）；
function moveIn(){
  在蛇头的前一格增加一格作为新的蛇头，并将蛇头的坐标作为第一个元素加入到代表蛇的数组中；
  if(没吃到食物){
    删除一格蛇尾，在画布中做相应改变；
  }
}

JS でキャンバスの幅と高さを設定する必要がある場合、他の CSS プロパティの設定とは少し異なることに注意してください。

CANVAS.width = MAXWIDTH;CANVAS.height = MAXHEIGHT;

エディターは、皆さんのためにエキサイティングなトピックも用意しました: 古典的な JavaScript ゲームの概要

以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。

js是什么编程语言？May 05, 2019 am 10:22 AM

js全称JavaScript，是一种具有函数优先的轻量级，直译式、解释型或即时编译型的高级编程语言，是一种属于网络的高级脚本语言；JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式，如函数式编程。

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、