xml地图|网站地图|网站标签 [设为首页] [加入收藏]

自己写的HTML5,编程小游戏

来源:http://www.ccidsi.com 作者:集成介绍 人气:75 发布时间:2019-05-05
摘要:探望有个别一度只会灌水的网上好友,在求学了前者之后,已经能写出下载量几千几万的剧本、样式,帮衬公众,成为受接待的人,以为满惊羡的。小编也想学会前端技能,变得受招待

探望有个别一度只会灌水的网上好友,在求学了前者之后,已经能写出下载量几千几万的剧本、样式,帮衬公众,成为受接待的人,以为满惊羡的。小编也想学会前端技能,变得受招待啊。于是心血来潮,发轫读书前端知识,并写下了那么些小演练。

​​​五子棋我们一定都玩过,想不想试着用 C 语言来促成1个简易版的伍子棋呢?上面就让大家后天始于,用最简便易懂的代码来编排四个操纵台下的五子棋,并日趋健全它,每种人都能轻便学会哦!

基本思路是如此的:

  • 娱乐的逻辑

  • 决断结果的算法

  • 分界面包车型大巴打算

  1. 行使Canvas绘制棋盘、棋子。
  2. 用贰维数组保存棋盘状态。
  3. 设置3个flag,用以标记落子顺序。
  4. 点击时,在数组中检查实验当前点击位置是还是不是留存棋子,若存在,则不落子;如游戏已终止,亦不落子。
  5. 落未时,更新数组,并将日前落子所在的行、列、左上-右下列、左下-右上列五个方向的棋盘状态写入到一维数组中,用以决断新落子是还是不是产生了五子连珠。
  6. 若形成了5子连珠,提示胜利,并停止游戏;反之,则调换顺序,继续拓展娱乐。

  效果图:

  • vim编辑器

  • Xfce终端

  • gcc编译器

  图片 1

本学黑曼巴较轻巧,未有复杂的语法和逻辑,适合全数C基础的用户,一齐研究和开采C语言能够做一些风趣的事务。

 

点击C 语言连忙实现5子棋 进入课程,就能够找到任何源码的下载地址。

代码如下:

图片 2

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <meta charset="utf-8">
  4 <head><title>五子棋</title></head>
  5 <body>
  6 <canvas id="myCanvas" width="560" height="560" style="border:3px solid black;">
  7 您的浏览器不支持 HTML5 canvas 标签。</canvas>  <br/>
  8 <button id="reset" onclick="controller.init(ctx)">重置</button>
  9 </body>
 10 <script>
 11 var controller = {
 12     round:true,
 13     color:"black",
 14     whiteTable:new Array(),
 15     blackTable:new Array(),
 16     row:0,
 17     col:0,
 18     over:false,
 19     trans:function() {        
 20         this.round = !this.round;
 21         if (!this.round) {
 22             this.blackTable[this.row][this.col] = 1;
 23             this.ifWin(this.blackTable)
 24             this.color = "white";
 25         }
 26         else {
 27             this.whiteTable[this.row][this.col] = 1;
 28             this.ifWin(this.whiteTable)            
 29             this.color = "black";
 30         }
 31     },
 32     ifWin:function(table) {    
 33         var arr1 = new Array();
 34         var arr2 = new Array();
 35         var arr3 = new Array();
 36         var arr4 = new Array();
 37         var n = 0;    
 38         for(x = 0; x<= lineNums; x  ) {         
 39             for(y = 0; y <= lineNums; y  ) 
 40             { 
 41                 var x1 = this.row - n;
 42                 var x2 = this.row   n;
 43                 var y1 = this.col - n;
 44                 var y2 = this.col   n;
 45                 if(y == this.col) {
 46                     arr1[x] = table[x][y];
 47                 }
 48                 if(x == this.row) {
 49                     arr2[y] = table[x][y];
 50                 }
 51             }
 52             if(this.inBounds(x1) && this.inBounds(y2)) {
 53                 arr3[x1] = table[x1][y2];
 54             }
 55             if(this.inBounds(x1) && this.inBounds(y1)) {
 56                 arr4[x1] = table[x1][y1];                
 57             }
 58             if(this.inBounds(x2) && this.inBounds(y1)) {
 59                 arr3[x2] = table[x2][y1];
 60             }
 61             if(this.inBounds(x2) && this.inBounds(y2)) {
 62                 arr4[x2] = table[x2][y2];                
 63             }
 64             n = n   1;
 65         } 
 66         this.getSum(arr1, this.row);
 67         this.getSum(arr2, this.col);
 68         this.getSum(arr3, this.row);
 69         this.getSum(arr4, this.row);
 70     },
 71     inBounds:function(i) {
 72         if(i>=0 && i<=15){
 73             return true;
 74         }
 75         else{
 76             return false;    
 77         }    
 78     },
 79     getSum:function(array, pos) {
 80         num = 5;
 81         posr = pos   1;
 82         while(num > 0){
 83             if(array[pos]>0  && this.inBounds(pos)) {
 84                 num = num - 1;
 85                 pos = pos - 1;
 86             }
 87             else{
 88                 break;
 89             }
 90         }
 91         while(num > 0){
 92             if(array[posr]>0 && this.inBounds(pos)) {
 93                 num  = num - 1;
 94                 posr = posr   1;
 95             }
 96             else {
 97                 break;
 98             }        
 99         }
100         if(num == 0) {
101             this.over = true;
102             this.gameOver();
103         }    
104     },
105     exist:function(x, y) {
106         this.row = x / ratio;
107         this.col = y / ratio;
108         var nums = this.whiteTable[this.row][this.col]   this.blackTable[this.row][this.col];
109         if( nums > 0 {
110             return true;
111         }
112         else{
113             return false;
114         }
115     },
116     gameOver:function() {
117         ctx.font="30px Arial";
118         ctx.fillStyle = "#FF0000";
119         if(this.round) {
120             ctx.fillText("白棋胜利",240,240);
121         }
122         else {
123             ctx.fillText("黑棋胜利",240,240);
124         }
125     },
126     init:function() {
127         this.round = true;
128         this.color = "black";
129         this.over  = false;
130         this.drawBoard();
131         for(i = 0; i<= lineNums; i  ) { 
132             this.whiteTable[i]=new Array();
133             this.blackTable[i]=new Array();
134             for(n = 0; n <= lineNums; n  ) { 
135                 this.whiteTable[i][n]=0;  
136                 this.blackTable[i][n]=0;
137             } 
138         } 
139     },
140     drawBoard:function() {
141         ctx.beginPath();
142         ctx.clearRect(0,0,width,width);
143         ctx.fillStyle = "#FFBB00";
144         ctx.fillRect(0,0,width,width);
145         for(var i = 1; i < (lineNums - 1); i  ) {
146             ctx.moveTo(i * ratio, 0);
147             ctx.lineTo(i * ratio, width);
148             ctx.stroke();
149             ctx.moveTo(0, i * ratio);
150             ctx.lineTo(width, i * ratio);
151             ctx.stroke();
152         }
153     },
154     drawPiece:function(posX, posY) {
155         ctx.beginPath();
156         ctx.arc(posX, posY, ratio/2, 0, 2*Math.PI);
157         ctx.fillStyle = this.color;
158         ctx.fill();
159         ctx.stroke();                    
160     }
161 }; 
162 //获取点击位置
163 function getMousePos(canvas, evt) { 
164    var rect = canvas.getBoundingClientRect(); 
165    return { 
166      x: evt.clientX - rect.left * (canvas.width / rect.width),
167      y: evt.clientY - rect.top * (canvas.height / rect.height)
168    }
169  }
170     
171 function getNode(pos) {
172     return ((pos / ratio).toFixed()) * ratio;
173 }
174 
175 var canvas = document.getElementById("myCanvas");
176 var ctx = canvas.getContext("2d");
177 var lineNums = 15;
178 var ratio = 40;
179 var width = (lineNums - 1) * ratio;
180 
181 controller.init();     
182 
183  canvas.addEventListener("click", function (evt) { 
184     var mousePos = getMousePos(canvas, evt); 
185     mousePos.x = getNode(mousePos.x);
186     mousePos.y = getNode(mousePos.y);
187       var exist = controller.exist(mousePos.x, mousePos.y);
188     if (!exist && !controller.over) {
189       controller.drawPiece(mousePos.x, mousePos.y); 
190       controller.trans();
191     } 
192  }, false);     
193 </script>
194 </html>

( 我们看了截图,有未有1种想拍死作者的冲动Σ( ° △ °|||)︴ )别急,看起来就像是极丑,实际上……确实非常丑。然而没什么,这一次的项目课,首假如给大家介绍3个小品种的开垦流程,同时帮我们复习 C 语言基础知识,让我们轻便实现一个功用相比完备的小游戏,后续笔者还会继续设立那一多种的体系课,带大家无微不至娱乐效果和分界面。废话有点多了,上面就让我们早先吧!

 

注:实验楼情形无法输入中文,能够用O和X来顶替棋子

点笔者进去在线版

我们率先要求叁个棋盘,记录棋盘中每二个岗位的“情状”。那么大家得以定义一个chessboard[16][16] 的数组,为何不是 [15][15] 呢?因为如此咱们就足以让数组的坐标正好对应棋盘的行和列,方便后边代码的编写制定。

 

开端编写制定主函数以前,大家先轻巧的思索一下,2个游戏日常的流水生产线是怎么的 首 先肯定是进入娱乐的贰个主分界面,然后点击伊始按键进入游戏,接着展现游戏画面,判别输赢,游戏停止。那么一个伍子棋游戏的流程呢?

那算是协调学习Javascript的多个起头,今后的话,大概也要以那些例子为根基,利用学到的学识,进一步增加其它效能,优化代码。

图片 3

 

本文链接: 

初阶编制主函数从前,大家先轻松的思索一下,一个嬉戏日常的流程是怎么着的 首 先显著是进入游戏的八个主分界面,然后点击开始按键进入游玩,接着展现游戏画面,剖断输赢,游戏结束。那么3个五子棋游戏的流程呢?

图片 4

图片 5

​ 主函数大概便是那般了,是或不是很轻易明了呢?附一张用gedit编辑main函数的图:

图片 6

在那一个函数中,我们要落到实处的机能是

来得1个粗略的应接分界面

须求输入Y之后显得出棋盘

上面,大家就从头吧!

[图片上传退步...(image-eb072八-1526885666126)]

​ 大家在 initGame 函数中接纳了 exit 以及 system 那七个函数,所以要在程序的最上边包罗 stdlib.h 这些头文件

图片 7

图片 8

功能:

打字与印刷出游号和列号,并打字与印刷出棋盘

数组成分的值为0,打印出星号,表示该岗位并没有人落子

数组成分的值为一,打字与印刷实心圆

数组元素的值为贰,打印空心圆

图片 9image

函数效能:

务求游戏者输入企图落子的职分

本文由68399皇家赌场发布于集成介绍,转载请注明出处:自己写的HTML5,编程小游戏

关键词: 68399皇家赌场 小游戏 五子 语言

上一篇:实现单体设计模式,单例模式

下一篇:没有了

最火资讯