LoginSignup
0
1

More than 1 year has passed since last update.

@Richa_maru(Richard Roe)

node.jsでチャットしながら出来るブラックジャックを作りました

Posted at

こんにちは
お久しぶりです。りちゃ丸です
10月までに完成させると言っていたチャットの出来るカードゲームなのですが
何とか完成しました
今回はブラックジャックになります
ブラックジャック.jpg

app.js
'use strict'
const express = require('express');
const socketIo = require('socket.io');
const http = require('http');
const fs = require('fs');
const bodyParser = require("body-parser");
const ejs = require('ejs');
var url ="./index.ejs"
const html =fs.readFileSync(url,'utf-8', (err, data) => {
  if(data) {
    console.log(data+'aaaa');
  } else {
    console.log(err+'aaaaa');
  }
});
const app= express()
app.use(express.json())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
const server = http.Server(app);
const io = socketIo(server);
var content;
app.get('/home',(request,response) => {
  content = ejs.render(html,{
          title:'',
          message:'',
  });
  response.writeHead(200, {'Content-Type':'text/html'});
  response.write(content);
  response.end()
  return
})

server.listen(3000)

var card = require('./card.js')
var rorl = require('./rorl.js')
var todos = card.setcard()

io.on('connection', (socket) => {
    io.emit('card',todos);
  socket.on('drowcard',()=>{
    io.emit('return_drow');
  });
  socket.on('dewlcard',(drow)=>{
        console.log(drow);
        var answer = rorl.rorl(drow,todos);
    io.emit('return_dewlcard',answer);
  });
  socket.on('sendMessage', (message) => {
      io.emit('receiveMessage', message);
 });
});

次にHTMLの処理です
jsとなっていますがejsです

index.js
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ブラックジャック</title>
</head>
<body>
  <form >
    <h1>ブラックジャック</h1>
    <p id ="answer"> </P>
  <p id="bosscard" >親のカードです</p>
  <p id="mycard" >貴方のカードです</p>
<button id="dorwbutton" type="button">ドロー</button>
<button id="dedbutton" type="button">ベッド</button>
</br>
      <input id="inputText" type="text">
      <button id="sendButton" type="button">送信</button>
          <ul id="messageList" />
    <script src="/socket.io/socket.io.js"></script>
    <script>
var count = 0;
var drow = 0;
var text;
var card = [25];
      const socket = io();
      socket.on('card', (todos) => {

      var select =['bosscard','mycard'];
      if(count == 0){
           card = cardset(todos);
      }
          // console.log(card);
           for(var i = 0; i<2; i++){
                for(var v = 0; v<2; v++){
                  if(i === 0){
                    console.log(select[i])
                    if(v === 0){
                        console.log("飛ばす")
                    }else{
                      var ul = document.getElementById(select[i]);
                    var li = document.createElement('ul');
                     var text = document.createTextNode(card[count]);
                 //    li.appendChild(text);
                     ul.appendChild(text);
                    }
                 }else{
                   var ul = document.getElementById(select[i]);
                 var li = document.createElement('ul');
                  var text = document.createTextNode(card[count]);
              //    li.appendChild(text);
                  ul.appendChild(text);
                 }

        count++
            console.log(count);
        }
           }
      }
    );
    socket.on('return_drow',() =>{
      console.log('うそそそそｓ')
      console.log(count);
      console.log(card);
      count++
      drow++
      var ul = document.getElementById('mycard');
    var li = document.createElement('ul');
     var text = document.createTextNode(card[count]);
 //    li.appendChild(text);
     ul.appendChild(text);
    })
const cardset = (todos) => {
var box = [25];
for(var i = 0 ; i<25; i++){
box[i]= todos[i];
//console.log(box[i]);
}
return box
    }
    document.getElementById('dorwbutton').addEventListener('click', () => {
      console.log("ドロー")
      socket.emit('drowcard');
    });
    document.getElementById('dedbutton').addEventListener('click', () => {
      console.log("デュエル")
      socket.emit('dewlcard',drow);
    });
    socket.on('return_dewlcard', (message) => {
        var ul = document.getElementById('answer');
        var li = document.createElement('ul');
         var text = document.createTextNode(message);
     //    li.appendChild(text);
         ul.appendChild(text);
    });
//チャット機能
        const clearText = () => {
          document.getElementById('inputText').value = '';
        }

        const addMessageList = (message) => {
          const ul = document.getElementById('messageList');
          const li = document.createElement('li');
          const text = document.createTextNode(message);
          li.appendChild(text);
          ul.appendChild(li);
        };

        document.getElementById('sendButton').addEventListener('click', () => {
          let inputMessage = document.getElementById('inputText').value;

          if (inputMessage === '') {
            return;
          }

          socket.emit('sendMessage', inputMessage);
          clearText();
        });

        //  'receiveMessage' イベントの発火を検知
        //  第一引数には受信したメッセージが入る
        socket.on('receiveMessage', (message) => {
          // 受信したメッセージをulタグに挿入
          addMessageList(message);
        });

      //チャット機能終わり
    </script>
  </form>
</body>

</html>

次にcardを配置するファイルです

card.js
module.exports.setcard =()=>{
  const type = ['ダイヤ','クラブ','キング','クイーン']
　var card = [];
   for(var y = 0; y<4; y++){
      for(var i =0; i<13; i++){
     card.push(type[y]+(i+1));
   }
 }
 var check = [];
  check = shafull(card)
 //console.log(check);
 return check;
}
function shafull(card){
  console.log(card[0])
  var num;
console.log(num);
var box = [];

for(var i = 0; i<52; ){
  let random = Math.random( );
  var num = Math.ceil(random*52);
  if(num === 52){
    num = 0;
  }
if(box.includes(card[num])){
}else{
  box.push(card[num])
  i++
}

最後にルールを決めるファイルです

rorl.js
module.exports.rorl =(drow,todos)=>{
  var box = [1];
    const regex = /[^0-9]/g;
    var message = "";
    var p = 3
box[0] = check(todos[0],todos[1])
box[1] = check(todos[2],todos[3])
if(drow < 0){
  for(var i = 0; i < drow; i++){
    p++
    box[1] = box[1] + parseInt(todos[p].replace(regex, ""), 10)
  }
}
console.log(box[0])
console.log(box[1])
if(box[0] > 21){
  message ="親がバーストしたので貴方の勝ちです"
}else if(box[1] >21){
    message ="バーストしたので親の価値です"
}else{
  if(box[0] > box[1]){
      message = "親の勝ちです"
  }else{
      message = "あなたの勝ちです"
  }
}
//  var result = todos[0].substr( 2, 2 );
return message
}

function check(a,b){
  var int = 0;
      const regex = /[^0-9]/g;
 int = (parseInt(a.replace(regex, ""), 10) + parseInt(b.replace(regex, ""), 10) )
  return int
}

作った感想
まず10月までに公開するとか言っておいて公開できなくてごめんなさい。スケジュール管理や見通しを間違えた自分のミスだと思います。
前回はSpringフレームワークでの開発で、チャット機能を実装とWebで公開できるようにするのを目標にしてましたが、学校で非同期通信を行う際にNodeを使っていたと思い、Nodeでチャット機能を実装しようとして触った所こうなりました。
Nodeが全く分からないので参考書等を読んでNode開発を行おうとしたのですが、どんどん違う方向に進んでいたような気がします。
expressを勉強しているとサンプルコードにはejsの使い方までは書いてなくてそれを調べて使えるようにして、今度はhtmlとサーバーサイドのデータのやり取りの行い方はどう行うのか、非同期通信を行う際の書き方と、やり取りする際に重複したりするのですが、これを重複しないようにするにはどう処理するべきか。データベースでチャットを保存できないかどうかなどの所でハマって気づけばSpringなんて関係ないJavascript単体で動く物になってしまいました。AWSで公開できないかなと調べたりしたのですがそっちは全く進んでいなくて中々上手くいかないですね
途中ブラックジャックのルールがあんまり分かってない事に気づいてルールに関してはバースト先にした方が負けになってたり、ルールが抜けてたりしてます
次はデータベース使ってサイト作ってみようと思いますがディスコードのボット制作も必要なのかなとも考えています

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1