<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>沙舟狼客制作</title>
<style type="text/css">
<!--
body{
margin:0 auto;
background:#6699FF;
width:960px;
height:800px;
}
nav{
width:960px;
height:50px;
float:left;
}
canvas {
border: thick solid #000000;
width:500px;
height:500px;
float:left;
}
#score{
width:100px;
height:500px;
font-size:18px;
font-weight:bold;
float:left;
}
#score span{
color:#FF0000;
}
-->
</style>
</head>
<body>
<nav>
贪吃蛇（按键WSAD：分别是上下左右）
</nav>
<canvas id="canvas" width="500" height="500">
</canvas>
<div id="score">
得分：<span>0</span>
</div>
</body>
</html>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var scoreEl = document.getElementById("score");
//当前前第一结蛇头的位置
var x = 40;
var y = 0;
//速度
var speed = 10 ;
//方向：1:up;2:down;3:left;4:right;
var d = 4;
//定义蛇身数组
var snakes = new Array();
//定义食物数组
var foods = new Array();
//记录分数
var score = 0;
//snakes[0] = {x:x,y:y};
//初始化舍身长度
var len = 5;
//初始化
function init(){
ctx.fillStyle = "#ff0000";
//画蛇神
for(var i = len-1;i>=0;i--){
snakes[len-1-i] = {x:i*10,y:0};
ctx.fillRect(snakes[len-1-i].x,snakes[len-1-i].y,10,10);
}
//花食物
foods[0] = {x:parseInt(Math.random()*490),y:parseInt(Math.random()*490)};
ctx.fillRect(foods[0].x,foods[0].y,10,10);
}
init();
print();
//键盘监听
function keydown(e){
switch(e.keyCode){
//上W
case 87:
if(d!=2){
d = 1;
}
break;
//下S
case 83:
if(d!=1){
d = 2;
}
break;
//左A
case 65:
if(d!=4){
d = 3;
}
break;
//右D
case 68:
if(d!=3){
d = 4;
}
break;
//测试
case 38:
addSnake();
break;
default:
}
}
//画食物和社
function draw(_x,_y){
//alert("_x:"+_x+";_y:"+_y);
ctx.clearRect(0,0,500,500);
ctx.fillStyle="#996633";
ctx.fillRect(0,0,500,500);
ctx.fillStyle="#FF0000";
//循环替代位置，从最后一个开始
for(var i = len-1;i>=1;i-- ){
//console.log(i);
snakes[i].x = snakes[i-1].x;
snakes[i].y = snakes[i-1].y;
ctx.fillRect(snakes[i].x,snakes[i].y, 10, 10);
}
snakes[0].x = _x;
snakes[0].y = _y;
ctx.fillRect(_x, _y, 10, 10);
ctx.fillStyle="#00FF00";
for(var i = 0;i<foods.length;i++){
ctx.fillRect(foods[i].x,foods[i].y,10,10);
}
//print();
}
//1:up;2:down;3:left;4:right;
function move(){
switch(d){
case 1:
y = y - speed;
if(y<0){
y = 490;
}
break;
case 2:
y = y + speed;
if(y>490){
y = 0;
}
break;
case 3:
x = x-speed;
if(x<0){
x = 490;
}
break;
case 4:
x = x + speed;
if(x>490){
x = 0;
}
break;
default:
}
draw(x,y);
}
function addSnake(){
snakes[len]= {x:snakes[len-1].x+10,y:snakes[len-1].y+10};
len = len + 1;
}
function createFood(){
var fx = parseInt(Math.random()*490);
var fy = parseInt(Math.random()*490);
if((Math.abs(fx-x)>=10)&&(Math.abs(fy-y)>=10)){
foods[foods.length] = {x:fx,y:fy};
return false;
}else{
return true;
}
}
function deleteFood(fIndex){
foods.splice(fIndex,1);
}
function checkHit(){
for(var i=0;i<foods.length;i++){
var fx = foods[i].x;
var fy = foods[i].y;
if((Math.abs(fx-x)<10)&&(Math.abs(fy-y)<10)){
addSnake();
deleteFood(i);
while(createFood()){
}
//createFood();
score +=10;
scoreEl.innerHTML = "得分：<span>"+score+"</span>";
}
}
}
setInterval("move()",50);
setInterval("checkHit()",50);
//setInterval("createFood()",5000);
document.onkeydown = keydown;
function print(){
var outString = "";
for(var i = 0;i<snakes.length;i++){
outString += i+":{x:"+snakes[i].x+",y:"+snakes[i].y+"};"
}
//alert(outString);
console.log(outString);
}
</script>
代码注释很详细，希望对大家有所帮助，但是换行的<br/>标签出来，看着很不爽！
预览效果图：
- 大小: 23.7 KB
分享到：
相关推荐
在这个项目中，“html5 canvas 实现贪吃蛇”，我们将探讨如何利用Canvas API来构建一个经典的贪吃蛇游戏。 首先，我们要理解Canvas的基本结构。一个Canvas元素在HTML中以`<canvas>`标签定义，可以通过`id`属性来...
这个“Html5-Canvas 贪吃蛇”项目是利用HTML5的Canvas技术和jQuery库来实现的经典游戏——贪吃蛇。下面我们将详细探讨HTML5 Canvas与jQuery在实现这个游戏中的关键知识点。 1. **HTML5 Canvas基本概念**： - ...
在这个“html5canvas开发贪吃蛇游戏”项目中，我们将深入探讨如何利用Canvas API构建一款经典的贪吃蛇游戏。 贪吃蛇游戏自1976年首次出现以来，就因其简单的操作和无限的挑战性深受玩家喜爱。在HTML5 Canvas上实现...
【标题】"非常简单的canvas贪吃蛇"是一个利用HTML5的Canvas API实现的贪吃蛇游戏。这个项目展示了如何在网页上用纯JavaScript构建一个基本的游戏框架，通过Canvas的绘图功能来绘制游戏元素，以及处理游戏逻辑。 ...
在这个“HTML5 Canvas贪吃蛇网页游戏”中，我们看到Canvas被用来实现经典的游戏——贪吃蛇。贪吃蛇游戏最早出现在早期的黑白手机上，现在通过HTML5技术，它得以在网页上重现，且具有更高的视觉效果和操作流畅性。 ...
在本项目中，"Javascript + canvas 实现贪吃蛇小游戏" 是一个利用HTML5的Canvas API和JavaScript语言构建的经典小游戏。Canvas是HTML5的一个重要特性，它允许在网页上进行动态图形绘制，非常适合用于开发此类交互式...
在这个“HTML5 canvas简单贪吃蛇小游戏”中，我们看到Canvas技术被巧妙地应用到了经典的游戏设计中，即大家熟知的贪吃蛇游戏。这个游戏通过JavaScript实现，标签"JS特效-其它代码"提示我们主要关注JavaScript在游戏...
在HTML5中，我们可以使用`<img>`标签或者CSS的`background-image`属性引用这些图片，提升游戏的视觉表现力。同时，开发者还可以通过JavaScript动态改变图片，实现更丰富的游戏效果。 总结： 这个H5贪吃蛇小游戏的...
在这个基于HTML5的贪吃蛇游戏中，"image"目录下的图片资源可能包括： 1. **蛇的图像**：不同长度的蛇体段图片，用于根据蛇的长度动态组合。 2. **食物图像**：游戏中的食物图标，蛇吃到后会得分并增长。 3. **背景...
在这个HTML5版本的贪吃蛇游戏中，开发者使用了HTML5、CSS3和JavaScript这三种核心技术来实现。接下来，我们将深入探讨这些技术如何协同工作，构建出这款网页版的贪吃蛇游戏。 首先，HTML5是超文本标记语言的第五个...
标签"js html5 贪吃蛇"暗示了这个游戏是用JavaScript和HTML5来实现的一个经典小游戏。JavaScript处理游戏逻辑，而HTML5则提供了展示游戏的平台。在实际的项目中，可能还会结合CSS3来美化游戏界面，如添加动态效果和...
例如，`<canvas>` 标签是 HTML5 中新增的元素，它提供了一个二维绘图环境，可以用来绘制贪吃蛇和食物。 JavaScript 是一种强大的脚本语言，负责处理游戏的动态行为和交互。在这个游戏中，JavaScript 控制着游戏的...
【标签】：“h5贪吃蛇”标签明确了这个压缩包的内容与HTML5技术有关，特别是与Canvas结合制作贪吃蛇游戏的实现方法。HTML5贪吃蛇游戏具有跨平台性，可以在各种现代浏览器上运行，包括手机和桌面设备，因此很适合用于...
在这个贪吃蛇游戏中，开发者可能使用Canvas来绘制游戏场景，包括蛇、食物以及边界。Canvas通过JavaScript的API进行操作，可以实现像素级别的画图，从而创建出各种复杂的动画效果。 JavaScript在HTML5游戏开发中扮演...
在HTML5贪吃蛇游戏中，Canvas扮演了画布的角色，所有的游戏元素都在这个画布上绘制。Canvas通过JavaScript的绘图API来完成动态图形的绘制，包括蛇、食物以及游戏边界等。开发者可以通过修改蛇的位置和方向，以及判断...
在本项目中，我们将深入探讨如何使用HTML5的Canvas API来开发一款经典的“贪吃蛇”游戏。Canvas是一个强大的绘图工具，它允许我们在网页上动态地绘制图形，非常适合用于创建交互式的游戏。 首先，我们需要了解...
Canvas是HTML5中的一个二维绘图元素，<canvas>标签提供了一个画布，开发者可以通过JavaScript的API在这个画布上进行图形绘制。这包括线条、形状、图像，甚至复杂的动画。Canvas API提供了丰富的绘图方法，如`...
HTML5的贪吃蛇游戏是利用现代Web技术实现的一个经典小游戏。HTML5是超文本标记语言HTML的第五个版本，它引入了许多新的特性和API，极大地增强了网页的交互性和动态性，使得创建复杂的Web应用程序成为可能，而无需...
描述中的"Canvas_snake_game-master"可能是一个基于`<canvas>`标签实现的贪吃蛇游戏项目。在这样的项目中，开发者通常会用`<canvas>`来绘制游戏场景，利用JavaScript处理游戏逻辑，比如蛇的移动、食物的生成、碰撞...