1. 贪吃蛇
2. 跳跳球
3. 熊猫爬树
还有俄罗斯方块
等经典游戏,我就不11
介绍了,欢迎大家在评论区中写下自己童年记忆深刻的游戏吧,如果写下了,希望大家可以动手去找到相应的图片或视频保存收藏起来,如果评论还能发图片那就更好了。锻炼一下动手能力和体验一下百度搜资源多、杂,因此珍惜珍贵的资源(记忆)
。也希望大家可以相互分享一下乐趣,资源,技巧,经验,让共享
更方便。
真正的主题在这☺
两个链接介绍JavaScript和Canvas
JavaScript:https://baike.baidu.com/item/JavaScript/321142
Canvas:https://www.w3school.com.cn/jsref/dom_obj_canvas.asp
先看效果图
主要JavaScript代码实现
//构造方块对象
function Rect(x,y,w,h,color){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = color;
}
//画方块的方法
Rect.prototype.draw = function(){
context.beginPath();
context.fillStyle= this.color;
context.rect(this.x,this.y,this.w,this.h);
context.fill();
context.stroke();
}
//构造蛇对象
function Snake(){
//定义一个数组存放一整条蛇的方块对象
var snakeArray = [];
var start_num = 4; //方块开始数量
this.snake_head_color = snake_head_color; //蛇头颜色
this.rect_color = rect_color; //方块颜色
//生成4个灰色方块
for(var i=0;i<start_num;i++){
var rect = new Rect(i*20,0,20,20,this.rect_color);
snakeArray.splice(0,0,rect);
}
var head = snakeArray[0];
head.color = this.snake_head_color;
this.head = snakeArray[0];
this.snakeArray = snakeArray;
//给定初始位置向右(keyCode右箭头)
this.direction = 39;
}
//画蛇的方法
Snake.prototype.draw = function (){
for(var i=0;i<this.snakeArray.length;i++){
this.snakeArray[i].draw();
}
}
//蛇移动的方法(重点)
Snake.prototype.move = function(){
//1、画一个方块位置与蛇头重叠
//2、将这个方块插入蛇头后面一个的位置
//3、然后将最后一个方块删除即可
//4、将蛇头向指定的方向移动一格
var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,this.rect_color);
this.snakeArray.splice(1,0,rect);
//判断是否吃到食物
if(isEat()){
score +=score_increment;
total_score.innerText = score;
food = new getRandomFood();
}else{
this.snakeArray.pop();
}
//设置蛇头的运动方向,37、A(65)左,38、W(87)上,39、D(68)右,40、S(83)下
if(this.direction==37||this.direction==65){ //左
this.head.x -= this.head.w;
}else if(this.direction==38||this.direction==87){//上
this.head.y -= this.head.h;
}else if(this.direction==39||this.direction==68){//右
this.head.x += this.head.w;
}else if(this.direction==40||this.direction==83){//下
this.head.y += this.head.h;
}
//GameOver判定
//撞墙
if(this.head.x+1 >mCanvas.width || this.head.x<0 || this.head.y+1>mCanvas.height || this.head.y<0){
//判定是否无墙模式
if(hasWall){
if(this.head.x > mCanvas.width){
this.head.x = 0;
}
if(this.head.x < 0){
this.head.x = mCanvas.width;
}
if(this.head.y > mCanvas.height){
this.head.y = 0;
}
if(this.head.y < 0 ){
this.head.y = mCanvas.height;
}
}else{
closeInterval(); //关闭定时器
setTimeout(function(){
//location.reload();
game_over(); //游戏结束
},1500);
}
}
//撞自己
for(var i=1;i<this.snakeArray.length;i++){
if(this.snakeArray[i].x == this.head.x && this.snakeArray[i].y == this.head.y){
closeInterval();
setTimeout(function(){
//location.reload();
game_over();
},1500);
}
}
}
//画出初始的蛇
var snake = new Snake();
snake.draw();
snake_length.innerText = snake.snakeArray.length;
//画出初始的食物
var food = new getRandomFood();
var timer = null;
//开启定时器
function startInterval(){
if(timer==null){
timer = setInterval(function (){
context.clearRect(0,0,mCanvas.width,mCanvas.height);
food.draw();
snake.move();
snake.draw();
snake_length.innerText = snake.snakeArray.length;
},movement);
}
}
JavaScript中Array
数组对象的splice()
和pop()
方法
splice()
函数用于插入、删除或替换数组的元素。
从当前数组中移除一部分连续的元素。如有必要,还可以在所移除元素的位置上插入一个或多个新的元素。该函数以数组形式返回从当前数组中被移除的元素。
详情教程请看: https://www.w3cschool.cn/jsref/jsref-splice.html https://codeplayer.vip/p/j7sh3
pop()
方法用于删除数组的最后一个元素并返回删除的元素。
详情教程请看:https://www.w3cschool.cn/jsref/jsref-pop.html
注意:这种两种方法都会改变原始数组!
大概熟悉
move()
判断(重点)
-[吃到食物,加入蛇数组,再随机产生食物]
-[判断游戏结束,撞墙,碰撞身体]document.onkeydown = function(e){...}
-[W、A、S、D、 ← ↑ ↓ →箭头控制方向键]
-[蛇方向为右,向左无效,方向上,向下无效类推… ]
-[enter
开始游戏、空格暂停游戏]源码:https://gitee.com/huiDBK/SnakeGame.git
目前已知Bug
,有时候可以蛇身体沿着墙走(进去了),可能因为撞墙判断写的不够严谨,或者方块大小的和canvas大小有冲突,没有形成倍数,还望大神指点迷津