js锅打灰太狼(小游戏)

1.创建Game类

import Map from './Map.js';
import Time from './Time.js';
import Wolf from './Wolf.js';class Game {constructor(e1, width, height) {this.e1 = e1;this.width = width;this.height = height;//初始化Canvasthis.initCanvas();//初始化Map类this.map = new Map();//初始化Wolf类this.wolf = new Wolf();//初始化Time类this.time = new Time();this.wolf.score = 0;}initCanvas() {//在div里创建canvas标签let canvas = document.createElement('canvas');//设置canvas的宽高canvas.width = this.width;canvas.height = this.height;this.context = canvas.getContext('2d');//放在哪个div标签里面，需要传标签idthis.e1.append(canvas);//给canvas添加点击事件canvas.onclick = () => {//1.获取鼠标位置event.offsetX,event.offsetYlet x = event.offsetX;let y = event.offsetY;//2.再判断鼠标点击的位置是否在狼的图片上面this.wolf.canvasClick(x, y);}}start() {this.time.tid = setInterval(() => {//清除画布this.context.clearRect(0, 0, this.width, this.height);//绘制地图this.map.draw(this.context, this.width, this.height);//绘制狼this.wolf.draw(this.context);//绘制分数this.context.font = "30px asa";this.context.fillStyle = 'red';this.context.fill();this.context.fillText(this.wolf.score, 100, 50);//绘制时间this.time.draw(this.context);}, 300)}
}
export default Game;

2.创建一个背景图片的类在Canvas上绘制出来

class Map {constructor() {this.initImage();//初始化图片}initImage() {this.img = new Image();this.img.src = "./img/game_bg.jpg";}draw(context, width, height) {context.drawImage(this.img, 0, 0, width, height);}
}
export default Map;

3.创建灰太狼类，绘制出灰太狼在洞里的坐标，实现打击效果

class Wolf {constructor() {this.initData();//初始化数据this.initIamge();//初始化图片}initData() {// 狼的位置坐标this.positionArr = [{ x: 170, y: 245 },{ x: 50, y: 320 },{ x: 45, y: 420 },{ x: 70, y: 540 },{ x: 200, y: 506 },{ x: 330, y: 545 },{ x: 320, y: 405 },{ x: 305, y: 290 },{ x: 200, y: 510 }];//狼图片下标this.index = 0;//产生一个随机数(随机洞位置的下标)this.posIndext = Math.floor(Math.random() * this.positionArr.length);//产生一个随机数(狼的类型  0：大灰太狼，1：小灰太狼)this.type = Math.round(Math.random());this.state = 0;//状态是否打击到了狼 0没打击到，1打击到了}initIamge() {//大灰太狼图片let bigWolfUrl = [//展示图片'./img/wolf/h0.png','./img/wolf/h1.png','./img/wolf/h2.png','./img/wolf/h3.png','./img/wolf/h4.png','./img/wolf/h5.png',//打击图片'./img/wolf/h6.png','./img/wolf/h7.png','./img/wolf/h8.png','./img/wolf/h9.png'];this.bigImage = [];bigWolfUrl.forEach(item => {let img = new Image();img.src = item;this.bigImage.push(img);})//小灰太狼图片let smallWolfUrl = [//展示图片'./img/wolf/x0.png','./img/wolf/x1.png','./img/wolf/x2.png','./img/wolf/x3.png','./img/wolf/x4.png','./img/wolf/x5.png',//打击图片'./img/wolf/x6.png','./img/wolf/x7.png','./img/wolf/x8.png','./img/wolf/x9.png'];this.smallImage = [];smallWolfUrl.forEach(item => {let img = new Image();img.src = item;this.smallImage.push(img);});this.allImage = [this.bigImage, this.smallImage];}draw(context) {context.drawImage(this.allImage[this.type][this.index], this.positionArr[this.posIndext].x, this.positionArr[this.posIndext].y);switch (this.state) {case 0://没打击到//判断狼的图片展示是否完成if (++this.index == 6) {this.index = 0;this.posIndext = Math.floor(Math.random() * this.positionArr.length); //狼动态展示完后，重新产生一个随机洞位置的下标)this.type = Math.round(Math.random());//重新产生一个狼类型的随机数  0大灰太狼，1小灰太狼)}break;case 1://打击到if (++this.index == 10) {this.index = 0;this.state = 0;this.posIndext = Math.floor(Math.random() * this.positionArr.length); //狼动态展示完后，重新产生一个随机洞位置的下标)this.type = Math.round(Math.random());//重新产生一个狼类型的随机数  0大灰太狼，1小灰太狼)}break;}}canvasClick(x, y) {// 判断鼠标点击的位置是否在狼的图片上面if (x > this.positionArr[this.posIndext].x &&x < this.positionArr[this.posIndext].x + 108 &&y > this.positionArr[this.posIndext].y &&y < this.positionArr[this.posIndext].y + 101) {//打击到了，播放6~9的图片console.log("打击到了");this.index = 6;this.state = 1;if (this.type == 0) {this.score += 10;}else {this.score -= 10;}}}
}
export default Wolf;

4.创建一个进度条类，显示游戏还有多久结束

class Time {constructor() {this.initImage();this.timeimgw = 270;}initImage() {this.img = new Image();this.img.src = "./img/progress.png";}draw(context) {context.drawImage(this.img, 95, 110, this.timeimgw, 28);this.timeimgw -= 7;if (this.timeimgw < -7) {context.clearRect(0, 0, 480, 800);context.font = "30px asa";context.fillStyle = 'red';context.fill();context.fillText("GAME OVER!", 100, 50);//清除定时器clearInterval(this.tid);}}
}
export default Time;

5.主体部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}</style>
</head><body><button>开始游戏</button><div id="game"></div><script type="module">import Game from './js/Game.js';let game = new Game(document.querySelector('#game'), 480, 800);document.querySelector('button').onclick = function () {game.start();}</script>
</body></html>

运行效果

js锅打灰太狼(小游戏)相关推荐

每个人都能制作的简易版狂拍灰太狼小游戏（HTML+CSS+JavaScript）
自制系列一完善版来了. 如果在制作过程中有任何问题你都可以私信我,我会一一答复你们的. 由于上一次发的进度条不是很完善,显得不美观,这次改进了进度条问题,使增强了游戏的体验感.制作过程很简单,每个人都 ...
网页版打地鼠小游戏源代码，网页版打灰太狼小游戏源码
网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码完整代码下载地址:网页版打地鼠小游戏源代码,网页版打灰太狼小游戏源码核心代码 <!DOCTYPE html> <html> ...
php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
利用js写的见缝插针小游戏
利用js写的见缝插针小游戏今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 游戏截图失败时代码如下 js代码 index.js 测试游 ...
JS实现简单农场小游戏
JS实现简单农场小游戏简介效果展示代码实现在线预览简介最近抽空写了一个简单的农场小游戏,比较简陋,目的只是为了练习js开发能力. 游戏界面顶部包含昵称.经验值.等级和金币信息展示.经验的获 ...
JS实现植物大战僵尸小游戏，代码记录及效果展示
前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址
HTML+js实现猜字小游戏
HTML+js实现猜字小游戏代码实现: <!DOCTYPE html> <html><head><meta charset="utf-8" ...
JS青蛙吃害虫小游戏
下载地址 JS青蛙吃害虫小游戏是一款简单的HTML5喂青蛙小游戏源码,可以当做微信小程序. dd:
html5小游戏主要用的js,用js+HTML5实现的小游戏-- 捕鱼达人游戏
大家基本上都玩过捕鱼达人这款游戏吧,下面我就来一个用js+HTML5实现的小游戏 2.[代码] body, p, canvas { image-rendering: optimizeSpeed; -w ...
使用Pixi.js编写JavaScript网页小游戏
Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...

js锅打灰太狼(小游戏)

1.创建Game类

2.创建一个背景图片的类在Canvas上绘制出来

3.创建灰太狼类，绘制出灰太狼在洞里的坐标，实现打击效果

4.创建一个进度条类，显示游戏还有多久结束

5.主体部分

运行效果

js锅打灰太狼(小游戏)相关推荐

最新文章

热门文章